// import { defineComponent } from 'vue';
// import AddOrganization from '../../../Structure/Components/AddOrganization/index.vue';
// import { useRouter } from 'vue-router';
// import type { treeDataType } from '../../type';
// import { GetHumanRosterDetail } from '@/apis/management/human/humanRoster';
// import { IconUser } from '@arco-design/web-vue/es/icon';

// export default defineComponent({
// props: ['data'],
// setup(props: { data: treeDataType; }, context) {
// watch(
// () => props.data,
// (val) => {
// originTreeData.data = val;
// }
// );

// const organizationVisible = ref(false);
// const superiorId = ref(0);
// const superiorData = ref();
// const router = useRouter();
// const container = ref<any>();
// const originTreeData = reactive<{ data: treeDataType; }>({ data: {} });
// const Node = ref();
// const proportion = ref(1);
// const avatar = ref(32);
// const initStyle = reactive({
// width: 250,
// height: 100,
// lineHeight: 44
// });
// const move = () => {
// const container: any = document.getElementsByClassName('container');
// let flag: boolean;
// let downX: number;
// let downY: number;
// let scrollLeft: number;
// let scrollTop: number;

// Node.value.addEventListener('mousedown', function (event: MouseEvent) {
// const _this = this as HTMLElement;
// container[0].style.cursor = 'grabbing';
// flag = true;
// downX = event.clientX;
// downY = event.clientY;
// scrollLeft = _this.scrollLeft;
// scrollTop = _this.scrollTop;
// });

// Node.value.addEventListener('mousemove', function (event: MouseEvent) {
// if (flag) {
// const _this = this as HTMLElement;
// var moveX = event.clientX;
// var moveY = event.clientY;
// var scrollX = moveX - downX;
// var scrollY = moveY - downY;
// _this.scrollLeft = scrollLeft - scrollX;
// _this.scrollTop = scrollTop - scrollY;
// }
// });

// Node.value.addEventListener('mouseup', function () {
// container[0].style.cursor = 'grab';
// flag = false;
// });

// Node.value.addEventListener('mouseleave', function (event: any) {
// flag = false;
// });
// };
// const getDetails = async (id: number, data: treeDataType & any) => {
// if (data?.personnelData) return;
// const res: any = await GetHumanRosterDetail({ id });
// data.personnelData = {};
// res?.forEach((ele: any) => {
// if (ele.code === 'CDC80FC12D1DE43018D098E8322D0F966') {
// data.personnelData.JobNumber = ele.value;
// }
// if (ele.code === 'C5B3625070EFD4698A20925CE32B31F16') {
// data.personnelData.rank = ele.value;
// }
// if (ele.code === 'CC3B7E3812CB74CEBAA2E57AF927F8189') {
// data.personnelData.company = ele.value;
// }
// if (ele.code === 'C2CB71FCF495347F896C7802ED9594BCA') {
// data.personnelData.department = ele.value;
// }
// if (ele.code === 'C4CBDEC96F74344FD8CED137416BD1D3D') {
// data.personnelData.startDate = ele.value;
// }
// if (ele.code === 'C3384BE6E60C341D68B8180DA04A1C4E1') {
// data.personnelData.phoneNumber = ele.value;
// }
// if (ele.code === 'C3384BE6E60C341D68B8180DA04A1C4E1') {
// data.personnelData.telephone = ele.value;
// }
// if (ele.code === 'C612A1730AFBF44F8B16A5B681F5B5B86') {
// data.personnelData.workType = ele.value;
// }
// if (ele.code === 'CE009C2E2B542409D815F0D3D54FE0E2B') {
// data.personnelData.workLocation = ele.value;
// }
// });
// };
// const go = (id: number) => {
// router.push({
// name: 'HumanRosterDetail',
// query: {
// id
// }
// });
// };

// const enlarge = () => {
// proportion.value += 0.05;
// };

// const shrink = () => {
// if (proportion.value > 0) proportion.value -= 0.05;
// };
// nextTick(() => {
// move();
// });

// const renderNode = (data: treeDataType, top: any = true) => {
// // const topStyle = {
// //   width: !top ? container.value?.scrollWidth + 'px' : '100%'
// // };
// return (
// <>
// <div class="render">
// <div class="head-line" style={`height: ${initStyle.lineHeight}px`}>
// <div class={{ 'bon-line': top }}></div>
// </div>
// <div
// v-show={data.layout}
// class="main"
// style={`width: ${initStyle.width}px;height: ${initStyle.height}px`}
// onClick={() => {
// data.btnShow = !data.btnShow;
// }}
// >
// <div style="position: relative;">
// <div class="duty-mian" v-show={data.userShow}>
// <div class="title">
// <div>部门负责人信息</div>
// {/* <a-button type="primary" size={16}>
//                       查看详情
//                     </a-button> */}
// </div>
// <div class="user">
// <div class="left">
// <a-avatar size={avatar.value}>
// <IconUser />
// </a-avatar>
// <div>
// <p>{data.name}</p>
// <p>
// {data?.position || '经理'} 司龄
// {data?.personnelData?.Siling || 1}
// </p>{' '}
// </div>
// </div>
// {/* <div class="right">
//                       <p>司龄</p>
//                       <p>{data?.personnelData?.Siling || 1}</p>
//                     </div> */}
// </div>
// <div class="information">
// <div>
// <p>
// 工号：{data?.personnelData?.JobNumber || 'LY-00001'}
// </p>
// </div>{' '}
// <div>
// <p>职级：{data?.personnelData?.rank || '1'}</p>
// </div>
// </div>
// <div class="information">
// <div>
// <p>
// 所属公司：{data?.personnelData?.company || '领壹集团'}
// </p>
// </div>{' '}
// <div>
// <p>
// 所属部门：{data?.personnelData?.department || '生产部'}
// </p>
// </div>
// </div>
// <div class="information">
// <div>
// <p>
// 入职日期：
// {data?.personnelData?.startDate || '2023-02-16'}
// </p>
// </div>{' '}
// <div>
// <p>
// 手机号码：
// {data?.personnelData?.phoneNumber || '19163766962'}
// </p>
// </div>
// </div>
// <div class="information">
// <div>
// <p>
// 工作电话：{data?.personnelData?.telephone || '82277822'}
// </p>
// </div>{' '}
// <div>
// <p>
// 工作邮箱：
// {data?.personnelData?.mailbox || '1447895248@qq.com'}
// </p>
// </div>
// </div>
// <div class="information">
// <div>
// <p>员工类型：{data?.personnelData?.workType || '全职'}</p>
// </div>{' '}
// <div>
// <p>
// 工作地点：
// {data?.personnelData?.workLocation || '广州市'}
// </p>
// </div>
// </div>
// </div>
// </div>
// <div class="top">
// <div class="left">
// <icon-layers style="margin-right: 5px;" />
// {data.department}({data.node})
// </div>
// <a-popover title="点击切换">
// <icon-menu
// onClick={(e) => {
// e.stopPropagation();
// data.layout = false;
// }} />
// </a-popover>
// </div>
// <div class="cn">
// <div class="left">
// <p onClick={() => go(data.userId)}>{data.name || '佚名'}</p>
// <p v-show={data.topPositionShow.show}>
// {data.position || '经理'}
// </p>
// </div>
// <a-avatar
// style={{ backgroundColor: '#b8d4ff' }}
// v-show={data.avatarShow.show}
// size={avatar.value}
// onClick={(e) => {
// e.stopPropagation();
// data.userShow = !data.userShow;
// getDetails(data.userId, data);
// }}
// >
// <IconUser />
// </a-avatar>
// </div>
// <div class="bottom">
// <a-popover title="员工">
// <div class="icon" v-show={data.employeeShow.show}>
// <icon-user style="margin-right: 5px;" />
// {data.personnel || 20}
// </div>
// </a-popover>
// <a-popover title="编制">
// <div class="icon" v-show={data.establishmentShow.show}>
// <icon-user-group style="margin-right: 5px;" />
// {data.authorized}
// </div>
// </a-popover>
// <a-popover title="职位">
// <div class="icon" v-show={data.positionShow.show}>
// <icon-storage style="margin-right: 2px;" />
// {data.position || 20}
// </div>
// </a-popover>
// </div>
// <div class="operation" v-show={data.btnShow}>
// <icon-minus-circle
// size={18}
// style="color:#5B8FF9;background: #f3f8fe;" />
// <div class="operation-all">
// <a-tooltip content="新增">
// <a-image
// onClick={() => add(data)}
// width="24"
// src="/src/assets/images/icon/add.svg"
// preview-visible={false} />
// </a-tooltip>
// <a-tooltip content="移动">
// <a-image
// width="24"
// src="/src/assets/images/icon/move.svg"
// preview-visible={false} />
// </a-tooltip>
// <a-tooltip content="合并">
// <a-image
// width="24"
// src="/src/assets/images/icon/merge.svg"
// preview-visible={false} />
// </a-tooltip>
// <a-tooltip content="复制">
// <a-image
// width="24"
// src="/src/assets/images/icon/copy.svg"
// preview-visible={false} />
// </a-tooltip>
// <a-tooltip content="删除" position="left">
// <a-image
// width="24"
// src="/src/assets/images/icon/del.svg"
// preview-visible={false} />
// </a-tooltip>
// </div>
// </div>
// </div>
// {/* 竖着的 */}
// <div
// class="vertical-main"
// v-show={!data.layout}
// onClick={() => {
// data.btnShow = !data.btnShow;
// }}
// >
// <div style="position: relative;">
// <div class="duty-mian" v-show={data.userShow}>
// <div class="title">部门负责人信息</div>
// <div class="user">
// <div class="left">
// <a-avatar size={avatar.value}>
// <IconUser />
// </a-avatar>
// <div>
// <p>{data.name}</p>
// <p>{data?.position || '经理'}</p>
// </div>
// </div>
// <div class="right">
// <p>司龄</p>
// <p>{data?.personnelData?.Siling || 1}</p>
// </div>
// </div>
// <div class="information">
// <div>
// <p>工号：</p>
// <p>{data?.personnelData?.JobNumber || 'LY-00001'}</p>
// </div>{' '}
// <div>
// <p>职级：</p>
// <p>{data?.personnelData?.rank || '1'}</p>
// </div>
// </div>
// <div class="information">
// <div>
// <p>所属公司：</p>
// <p>{data?.personnelData?.company || '领壹集团'}</p>
// </div>{' '}
// <div>
// <p>所属部门：</p>
// <p>{data?.personnelData?.department || '生产部'}</p>
// </div>
// </div>
// <div class="information">
// <div>
// <p>入职日期：</p>
// <p>{data?.personnelData?.startDate || '2023-02-16'}</p>
// </div>{' '}
// <div>
// <p>手机号码：</p>
// <p>{data?.personnelData?.phoneNumber || '19163766962'}</p>
// </div>
// </div>
// <div class="information">
// <div>
// <p>工作电话：</p>
// <p>{data?.personnelData?.telephone || '82277822'}</p>
// </div>{' '}
// <div>
// <p>工作邮箱：</p>
// <p>
// {data?.personnelData?.mailbox || '1447895248@qq.com'}
// </p>
// </div>
// </div>
// <div class="information">
// <div>
// <p>员工类型：</p>
// <p>{data?.personnelData?.workType || '全职'}</p>
// </div>{' '}
// <div>
// <p>工作地点：</p>
// <p>{data?.personnelData?.workLocation || '广州市'}</p>
// </div>
// </div>
// </div>
// </div>
// <div class="top">
// <div class="left">
// <a-popover title="点击切换">
// <icon-highlight
// size="25"
// style="color: #fff"
// onClick={(e) => {
// e.stopPropagation();
// data.layout = true;
// }} />
// </a-popover>
// <p>
// {data.department}({data.node})
// </p>
// </div>
// <div class="right">
// <a-avatar
// style={{ backgroundColor: '#b8d4ff' }}
// v-show={data.avatarShow.show}
// size={40}
// onClick={(e) => {
// e.stopPropagation();
// data.userShow = !data.userShow;
// getDetails(data.userId, data);
// }}
// >
// <IconUser />
// </a-avatar>
// <div class="text">
// <p>{data.name || '佚名'}</p>
// <p v-show={data.topPositionShow.show}>
// {data.position || '经理'}
// </p>
// </div>
// </div>
// </div>
// <div class="bottom">
// <a-popover title="员工">
// <div class="icon" v-show={data.employeeShow.show}>
// <icon-user size="20" style="margin-right:10px;" />
// <text> {data.personnel || 20}</text>
// </div>
// </a-popover>
// <a-popover title="编制">
// <div class="icon" v-show={data.establishmentShow.show}>
// <icon-user-group size="20" style="margin-right: 10px;" />
// <text> {data.authorized}</text>
// </div>
// </a-popover>
// <a-popover title="职位">
// <div class="icon" v-show={data.positionShow.show}>
// <icon-storage size="20" style="margin-right: 10px;" />
// <text> {data.position || 20}</text>
// </div>
// </a-popover>
// </div>
// </div>
// <div
// class="bottom-line"
// style={{ height: initStyle.lineHeight + 'px' }}
// >
// <div class={{ 'top-line': data.children }}></div>
// </div>
// </div>
// </>
// );
// };

// const renderView = (
// data: treeDataType,
// type: 'top' | 'last' | 'first' | 'middle' | 'only'
// ) => {
// if (!data) return null;

// const style: any = {
// 'border-top': ' 1px solid #d7d7d7',
// width: '50%'
// };

// const children: any = {
// transform: `scale(${proportion.value})`,
// width: type === 'top' ? container.value?.scrollWidth + 'px' : '100%',
// display: 'flex',
// 'flex-direction': 'column',
// ' align-items': 'center'
// };
// return (
// <div
// key={data.id}
// class="children"
// style={type === 'top' ? children : { width: '100%' }}
// >
// <div style=" display:flex;position: relative;width: 100%;">
// <div
// style={type === 'last' || type === 'middle' ? style : { width: '50%' }}
// ></div>
// <div
// style={type === 'first' || type === 'middle' ? style : { width: '50%' }}
// ></div>
// </div>
// {renderNode(data, type === 'top' ? false : true)}
// {data.children ? (
// <div style="display:flex;" ref={type === 'top' ? container : null}>
// {data.children.map((ele: treeDataType, index: number) => {
// return renderView(
// ele,
// changeChildrenShow(index, data.children.length)
// );
// })}
// </div>
// ) : null}
// </div>
// );
// };

// const changeChildrenShow = (index: number, length: number) => {
// if (length === 1) return 'only';
// if (!index) return 'first';
// if (length === index + 1) return 'last';
// return 'middle';
// };
// const add = (record?: any) => {
// if (record) {
// superiorId.value = record.id;
// superiorData.value = record;
// console.log(record, record.id);
// } else {
// superiorId.value = 0;
// superiorData.value = null;
// }
// organizationVisible.value = true;
// };
// const closeOrganizationVisible = (e: boolean) => {
// organizationVisible.value = e;
// };
// context.expose({ enlarge, shrink });
// return () => (
// <div>
// <div class="container" ref={Node}>
// {/* <div class="icons">
//                 <div class="icon">
//                   <IconFont type="icon-23fangda" size="22" onClick={enlarge} />
//                 </div>

//                 <div class="icon">
//                   <IconFont type="icon-24suoxiao" size="22" onClick={shrink} />
//                 </div>
//               </div> */}
// {!originTreeData.data?.id ? (
// <>
// <a-empty />
// </>
// ) : (
// <>{renderView(originTreeData.data, 'top')}</>
// )}
// </div>
// <AddOrganization
// onUpdate: visible={(e) => {
// closeOrganizationVisible(e);
// }}
// visible={organizationVisible.value}
// superiorData={superiorData.value}
// superiorId={superiorId.value}
// ></AddOrganization>
// </div>
// );
// }
// });
